<template>
  <div class="admin-dashboard">
    <!-- 头部标题 -->
    <div class="dashboard-header">
      <h1>管理员仪表板</h1>
      <p class="subtitle">论坛数据总览与管理</p>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon user-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.totalUsers }}</h3>
            <p>总用户数</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon post-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.totalPosts }}</h3>
            <p>总帖子数</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon resource-icon">
            <el-icon><Files /></el-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.totalResources }}</h3>
            <p>总资源数</p>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon report-icon">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.pendingReports }}</h3>
            <p>待处理举报</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="action-grid">
        <el-card class="action-card" @click="$router.push('/admin/users')">
          <div class="action-content">
            <el-icon class="action-icon"><User /></el-icon>
            <h3>用户管理</h3>
            <p>查看和管理所有用户</p>
          </div>
        </el-card>

        <el-card class="action-card" @click="$router.push('/admin/posts')">
          <div class="action-content">
            <el-icon class="action-icon"><Document /></el-icon>
            <h3>帖子管理</h3>
            <p>查看和管理所有帖子</p>
          </div>
        </el-card>

        <el-card class="action-card" @click="$router.push('/admin/resources')">
          <div class="action-content">
            <el-icon class="action-icon"><Files /></el-icon>
            <h3>资源管理</h3>
            <p>查看和管理所有资源</p>
          </div>
        </el-card>

        <el-card class="action-card" @click="$router.push('/admin/reports')">
          <div class="action-content">
            <el-icon class="action-icon"><Warning /></el-icon>
            <h3>举报管理</h3>
            <p>处理用户举报</p>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 最新活动 -->
    <div class="recent-activity">
      <h2>最新活动</h2>
      <el-card>
        <el-timeline>
          <el-timeline-item
            v-for="activity in recentActivities"
            :key="activity.id"
            :timestamp="activity.time"
            placement="top"
            :type="activity.type"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { User, Document, Files, Warning } from '@element-plus/icons-vue'
import { getPlatformStatistics } from '@/api/admin'

// 统计数据
const stats = ref({
  totalUsers: 0,
  totalPosts: 0,
  totalResources: 0,
  pendingReports: 0
})

// 最新活动
const recentActivities = ref([
  {
    id: 1,
    content: '用户张三发布了新帖子《Vue.js学习心得》',
    time: '2025-07-03 14:30',
    type: 'primary'
  },
  {
    id: 2,
    content: '管理员处理了一条举报',
    time: '2025-07-03 13:45',
    type: 'success'
  },
  {
    id: 3,
    content: '用户李四上传了新资源',
    time: '2025-07-03 12:20',
    type: 'info'
  },
  {
    id: 4,
    content: '收到新的举报信息',
    time: '2025-07-03 11:15',
    type: 'warning'
  }
])

// 获取统计数据
const fetchStats = async () => {
  try {
    const res = await getPlatformStatistics();
    if (res.code === 200 && res.data) {
      stats.value = {
        totalUsers: res.data.userCount,
        totalPosts: res.data.postCount,
        totalResources: res.data.resourceCount,
        pendingReports: res.data.pendingReportCount
      }
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
.admin-dashboard {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.dashboard-header {
  margin-bottom: 32px;
  text-align: center;
}

.dashboard-header h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 8px;
  font-weight: 700;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1.1rem;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 16px;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 8px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-right: 16px;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.post-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.resource-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.report-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-info h3 {
  font-size: 2rem;
  margin: 0;
  color: #2c3e50;
  font-weight: 700;
}

.stat-info p {
  margin: 4px 0 0 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.quick-actions, .recent-activity {
  margin-bottom: 40px;
}

.quick-actions h2, .recent-activity h2 {
  color: #2c3e50;
  margin-bottom: 24px;
  font-size: 1.8rem;
  font-weight: 600;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.action-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 16px;
  overflow: hidden;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-content {
  text-align: center;
  padding: 16px;
}

.action-icon {
  font-size: 48px;
  color: #3498db;
  margin-bottom: 16px;
}

.action-content h3 {
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.action-content p {
  color: #7f8c8d;
  margin: 0;
  font-size: 0.9rem;
}

:deep(.el-timeline-item__timestamp) {
  color: #7f8c8d;
  font-size: 0.85rem;
}
</style>
